<template>
  <div>
    <el-container>
      <el-header class="filters">
        <div>
          <el-row class="row-bg" style="margin-top: 2%">
            <el-col :md="8" :lg="5" :xl="4">
              <span style="font-size: 14px"> 名称： </span>
              <el-input class="inputs"></el-input>
            </el-col>
            <el-col :md="8" :lg="6" :xl="5">
              <span style="font-size: 14px"> 所属模块： </span>
              <el-input class="inputs"></el-input>
            </el-col>
            <el-col :md="8" :lg="6" :xl="7">
              <span style="font-size: 14px"> 创建时间： </span>
              <el-date-picker
                  v-model="dates"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  clearable
              />
            </el-col>
            <el-col :md="6" :lg="3" :xl="3" style="margin-left: 20%">
              <el-button>
                <el-icon style="vertical-align: middle">
                  <plus/>
                </el-icon>
                <span>新增</span>
              </el-button>
              <el-button @click="UrlList">
                <el-icon style="vertical-align: middle">
                  <Search/>
                </el-icon>
                <span>查询</span>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <el-table
            :data="RowDatas.data"
            style="width: 100%"
            empty-text="暂无数据"

            @row-click="rowcl"
        >
          <el-table-column type="index" :index="1" label="序号" width="100"/>
          <el-table-column prop="url" label="path" width="300"/>
          <el-table-column prop="models" label="所属模块" width="200"/>
          <el-table-column prop="create_time" label="创建时间" width="200"/>
          <el-table-column prop="update_time" label="更新时间" width="200"/>
          <el-table-column prop="describe" label="备注" min-width="200"/>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button circle @click="UrlDetail(scope.row.id)">
                <el-icon :size="15">
                  <More/>
                </el-icon>
              </el-button>
              <el-button
                  type="warning"
                  circle
                  @click="
                  UrlEdit(scope.row.id);
                  dialogtype = '编辑';
                  dialogFormVisible = true;
                  proid = scope.row.id;
                "
              >
                <el-icon :size="15">
                  <Edit/>
                </el-icon>
              </el-button>

              <el-button type="danger" circle @click="UrlDelete(scope.row.id)">
                <el-icon :size="15">
                  <Delete/>
                </el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <paginations
            :pages="pages"
            :datas="RowDatas"
            :handleCurrentChange="handleCurrentChange"
            :handleSizeChange="handleSizeChange"
        >
        </paginations>
      </el-footer>
    </el-container>
    <el-dialog
        v-model="dialogFormVisible"
        :title="dialogtype"
        destroy-on-close
        width="30%"
        @closed="reset"
    >
      <el-form
          ref="formlabelref"
          :model="form"
          label-position="top"
          :rules="rules"
      >
        <el-form-item
            label="项目名称"
            :label-width="formLabelWidth"
            prop="projectname"
        >
          <el-input v-model="form.projectname" autocomplete="off"/>
        </el-form-item>
        <el-form-item
            label="测试人员"
            :label-width="formLabelWidth"
            prop="testrunner"
        >
          <el-input v-model="form.testrunner" autocomplete="off"/>
        </el-form-item>
        <el-form-item
            label="备注"
            :label-width="formLabelWidth"
            prop="describe"
        >
          <el-input
              type="textarea"
              v-model="form.describe"
              autocomplete="off"
              show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="reset">取消</el-button>
          <el-button
              v-if="dialogtype === '新增'"
              type="primary"
              @click="AddProjecet(formlabelref)"
          >确定</el-button
          >
          <el-button
              v-else-if="dialogtype === '编辑'"
              type="primary"
              @click="editproject(proid, formlabelref)"
          >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {ref, reactive, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {titleTest} from "../utils/checkrules";
import paginations from "./tools/paginations.vue";

export default {
  name: "UrlList",
  setup() {
    let dates = ref("");
    let RowDatas = ref({
      data: [
        {
          urlid: 1,
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          urlid: 2,
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
        {
          url: "/login",
          models: "登录",
          describe: "12333333333333333333333333123",
          create_time: "2022-07-13 14:18:56",
          update_time: "2022-07-14 14:18:56",
        },
      ],
    });
    const dialogFormVisible = ref(false);
    let pages = ref({
      current_page: 1, //从第1页开始的话是这样写;
      content: 11, //内含5个对象的数组, 格式在下面介绍
      page: 1,
      page_size: 10, //用article_content.length, 根据数据量自动增页
    });

    function UrlList() {
      console.log(dates.value[0]);
      console.log("列表 ");
    }

    function UrlDetail(UrlID) {
      console.log("获取URL详情 ");
    }

    function UrlDelete(UrlID) {
      console.log("删除");
    }

    function UrlEdit(UrlID) {
      UrlDetail();
      console.log("编辑");
    }

    function handleCurrentChange(val) {
      pagedata.value.current_page = val;
      console.log(pagedata);
    }

    function handleSizeChange(val) {
      pagedata.value.page_size = val;
      console.log(pagedata);
    }

    function rowcl(row, column, event) {
      console.log(row);
      console.log(column);
      console.log(event);
    }

    return {
      RowDatas,
      pages,
      dates,
      UrlDetail,
      UrlDelete,
      UrlEdit,
      UrlList,
      handleCurrentChange,
      handleSizeChange,
      dialogFormVisible,
      rowcl,
    };
  },
  components: {
    paginations,
  },
};
</script>

<style>
.filters {
  height: auto;
}

.inputs {
  width: 200px;
}

.icons {
  display: none;
}
</style>